<template>
    <div>
        <el-container>
            <el-header height="30px"> <el-divider content-position="center">打印模板设计器</el-divider></el-header>
            <el-container>
                <el-aside width="300px" style="margin-top: 20px;">
                    <div style="background-color: gray;; padding: 10px;border-radius: 5px;">
                        <div>
                            <span
                                style="font-family: 'Courier New', Courier, monospace;font-size: small;color: white;">点击下方字段，在编辑器光标处插入字段，使用${变量名}替换内容</span>
                        </div>
                        <div>
                            <span style='font-size:50px;'>&#128073</span>
                        </div>
                    </div>
                    <div style="background-color: white; margin-top: 20px; padding: 10px">
                        <div>
                            <span>系统字段</span>
                        </div>
                        <div v-for="field in systemFields" :key="field.value">
                            <el-button :icon="field.icon" class="field-item" @click="(event) => dragStart(field.value)">
                                {{ field.label }}
                            </el-button>
                        </div>

                    </div>
                    <div style="background-color: white; margin-top: 20px; padding: 10px">
                        <div>
                            <span>表单字段</span>
                        </div>
                        <div v-for="field in forms" :key="field.id">
                            <el-button v-show="(field.props?.enablePrint==null||field.props?.enablePrint==undefined)?false:true" :icon="field.icon" class="field-item"
                                @click="(event) => dragStart(field.id)">
                                {{ field.title }}
                            </el-button>
                        </div>

                    </div>
                </el-aside>
                <el-main>
                    <div style="border: 1px solid #ccc;">
                        <PrintUeditor ref="ue" v-model="editorHtml" @ready="ready">
                        </PrintUeditor>
                        <div style="display: grid; grid-template-columns: 1fr 21fr 1fr 1fr; margin-top: 10px">
                            <div></div>
                            <div></div>
                            <el-button type="danger" @click="close">关闭</el-button>
                            <el-button type="primary" @click="save">确定</el-button>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        <div></div>
    </div>


</template>

<script>
import PrintUeditor from './PrintUeditor.vue';


export default {
    name: 'PrintTemplateEditor',
    components: { PrintUeditor },

    data() {
        return {
            editor: null,
            editorHtml: '',
            mode: 'default', // or 'simple'
            sourceVisible: false, // 控制源码窗口的显示
            //系统字段
            systemFields: [
                {
                    label: '当前日期',
                    value: 'currentDate',
                    icon: 'el-icon-date'
                },
                {
                    label: '当前时间',
                    value: 'currentTime',
                    icon: 'el-icon-time'
                },
                {
                    label: '打印人',
                    value: 'printerName',
                    icon: 'el-icon-printer'
                },
                {
                    label: '发起人',
                    value: 'sponsorName',
                    icon: 'el-icon-user'
                },
                {
                    label: '发起人部门',
                    value: 'sponsorDepartmentName',
                    icon: 'el-icon-office-building'
                },
                {
                    label: '发起时间',
                    value: 'startTime',
                    icon: 'el-icon-timer'
                },
                {
                    label: '完成时间',
                    value: 'endTime',
                    icon: 'el-icon-time'
                },
                {
                    label: '流程名称',
                    value: 'processName',
                    icon: 'el-icon-s-promotion'
                },
                {
                    label: '流程编号',
                    value: 'processCode',
                    icon: 'el-icon-s-promotion'
                },
                {
                    label: '审批结果',
                    value: 'processStatus',
                    icon: 'el-icon-s-check'
                },

            ]
        };
    },
    computed: {
        setup() {
            return this.$store.state.design.settings;
        },
        forms() {
            
            //处理布局内容
            let forms = this.$store.state.design.formItems;
            
            let newforms = this.createForms(forms);
            //过滤掉说明文字和附件
            newforms = newforms.filter(form => (form.name !== 'Description' && form.name !== 'FileUpload'));
            return newforms;
        },

    },
    created() {
        this.editorHtml = this.setup.templateHtml
    },
    mounted() {
    },
    methods: {
        //处理分栏布局
        createForms(forms) {
            let newforms = [];
            forms?.forEach(form => {
                if (form.name === 'SpanLayout') {
                    form.props.items?.forEach(item => {
                        if (item.name === 'SpanLayout') {
                            this.createForms(item.props.items).forEach(span=>{
                                newforms.push(span);
                            });
                        } else {
                            newforms.push(item);
                        }
                    })
                } else {
                    newforms.push(form);
                }
            });
            return newforms;
        },
        //对编辑器的操作最好在编辑器ready之后再做
        ready(ue_instance) {
            this.editor = ue_instance;//实例化存储
        },

        //点击插入事件
        dragStart(id) {
            this.editor?.execCommand('insertHtml', '${' + id + '}')
        },
        //关闭
        close() {
            this.$emit('close');
        },
        //保存
        save() {
            this.setup.templateHtml = this.editorHtml;
            this.$emit('close')

        }

    },

};
</script>

<style scoped>
.field-item {
    width: 200px;
    margin: 2px;
    padding: 2px;
    border: 1px solid #ccc;
    background-color: #f2f2f2;

}

.field-item:hover {
    background-color: #e6e6e6;
}

.preview-overlay,
.source-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.preview-content {
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    padding: 10px;
    max-width: 1000px;
    max-height: 800px;
    min-width: 1000px;
    min-height: 800px;
    overflow-y: auto;
}

textarea {
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    padding: 10px;
    max-width: 90%;
    max-height: 80%;
    overflow-y: auto;
}

textarea {
    width: 90%;
    height: 70%;
    resize: vertical;
}

button {
    margin: 10px;
    padding: 5px 10px;
}
</style>